<template>
  <view class="container">
    <view class="box">
      <view style="font-weight: 500; font-size: 30rpx; color: #222222">联系电话</view>
      <input type="text" class="input" placeholder="请输入" v-model="phone" />
      <view class="fnok" :style="{ opacity: phone ? '1' : '0.5' }" @click="okfn">确认</view>
    </view>
    <!-- 历史记录 -->
    <view style="display: flex; flex-wrap: wrap">
      <view class="item" v-for="(item, index) in history" :key="index" @click="phone = item">{{ item }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      history: ['自己']
    };
  },
  onLoad() {
    if (uni.getStorageSync('historyphone')) {
      this.history = uni.getStorageSync('historyphone');
    }
  },
  methods: {
    okfn() {
      const pages = getCurrentPages();
      // console.log(pages[pages.length - 1].route);
      const route = '/' + pages[pages.length - 2].route + '?phone=' + this.phone;
      console.log(route);
      if (this.phone == '自己') {
        console.log(11111);
        uni.setStorageSync('firendphone', '');
        uni.redirectTo({
          // url: '/pages/index/index?phone=' + this.phone
          url: route
        });
      } else {
        this.history.forEach((item) => {
          // console.log('条件', item == this.phone);
          // console.log('条件2', item == '自己');
          if (item == this.phone || this.phone == '自己') {
            // console.log('走了正确的路径');
            uni.setStorageSync('firendphone', this.phone);
            uni.redirectTo({
              // url: '/pages/index/index?phone=' + this.phone
              url: route
            });
          } else {
            // console.log('走这里了---');
            console.log(this.phone, item);

            if (this.history.length == 6) {
              this.history.splice(this.history.length - 1, 1);
              this.history.push(this.phone);
            } else {
              this.history.push(this.phone);
            }
            uni.setStorageSync('firendphone', this.phone);
            uni.setStorageSync('historyphone', this.history);
            uni.redirectTo({
              // url: '/pages/index/index?phone=' + this.phone
              url: route
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 22rpx;
  .box {
    box-sizing: border-box;
    width: 706rpx;
    height: 388rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 42rpx 26rpx;
    .input {
      box-sizing: border-box;
      width: 662rpx;
      height: 100rpx;
      background: #f6f6f6;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 10rpx 0 54rpx 0;
      padding: 30rpx;
    }
    .fnok {
      width: 654rpx;
      height: 92rpx;
      background: #3483f6;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      line-height: 92rpx;
      text-align: center;
      color: #fff;
    }
  }
  .item {
    box-sizing: border-box;
    padding: 10rpx;
    background-color: #fff;
    margin: 24rpx 16rpx 24rpx 0;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
